<template>
  <el-container>
    <el-aside>
      <div style="text-align: center">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="1" @click="turnhome">
                <i class="el-icon-location"></i>
                <span slot="title">个人主页</span>
              </el-menu-item>
              <el-menu-item index="2" @click="turnportal">
                <i class="el-icon-location"></i>
                <span slot="title">个人门户</span>
              </el-menu-item>
              <el-menu-item index="3" @click="turnsearch">
                <i class="el-icon-location"></i>
                <span slot="title">搜索文献</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </el-aside>
    <el-main>
      <div class="background">
        <div>
          <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/Mainpage' }"
              >个人主页</el-breadcrumb-item
            >
            <el-breadcrumb-item>xxx的门户</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div style="text-align: center">
          <el-avatar
            :size="200"
            :src="imgurl"
            shape="circle"
            alt="暂无头像"
          ></el-avatar>
          <br />
          <h1>xxx</h1>
        </div>
        <div style="position: absolute; top: 55%; left: 45%">
          <el-button
            type="success"
            icon="el-icon-circle-plus-outline"
            round
            v-if="ifmyself"
            @click="applyportal"
            >认领门户</el-button
          >
          <el-dialog
            title="请输入您的信息"
            :visible.sync="dialog"
            width="50%"
            :before-close="dialogClose"
          >
            <div>
              <el-form ref="applyForm" :model="applyForm" label-width="80px">
                <el-form-item label="您的姓名">
                  <el-input v-model="applyForm.name"></el-input>
                </el-form-item>
                <el-form-item label="您的身份">
                  <el-radio-group v-model="applyForm.identity">
                    <el-radio label="高校学生"></el-radio>
                    <el-radio label="高校教师"></el-radio>
                    <el-radio label="研究所科研人员"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="您的单位">
                  <el-input v-model="applyForm.school"></el-input>
                </el-form-item>
                <el-form-item label="个人简介">
                  <el-input
                    type="textarea"
                    v-model="applyForm.introduction"
                    placeholder="请输入内容"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center">
              <el-button type="info" @click="dialog = false">取 消</el-button>
              <el-button type="success" @click="submitapply">提 交</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
  
  <script>
export default {
  created() {
    //1.先把浏览器里存的信息填进数据
    this.userid = sessionStorage.getItem("userid");
    this.portalname = sessionStorage.getItem("portalname");
    //如果session里存着portalname，说明用户是从名字那里点进来的,如果没有，说明是点进自己的
    //2.根据userid和portalid是否匹配决定页面样式
    //3.根据portalid确定ifget
    //4.根据portalid，要来对应的portalname、imgurl、introduction、paperForm和papertotal
    //5.初始化页面
  },
  data() {
    return {
      userid: "", //当前浏览器里保存的用户id
      portalname: "施东成", //门户主人的姓名
      ifmyself: true, //点进门户的是不是本人
      applyForm: {
        name: "", //姓名，
        identity: "", //身份
        school: "", //单位
        introduction: "", //自我介绍
      },
      dialog: false,
      ifapply: false, //是否申请过
    };
  },
  methods: {
    applyportal() {
      this.dialog = true;
    },
    dialogClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    submitapply() {
      this.ifapply = true;
    },
  },
};
</script>
  
  <style>
.background {
  background-image: url("../assets/imgs/blkp.jpg");
  background-repeat: no-repeat;
  height: 500px;
  background-position: right bottom;
  position: relative;
}
</style>
  